<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Ext.Panel</title>
    <link rel="stylesheet" type="text/css" href="../lib/ext/resources/css/ext-all-neptune.css"/>
    <script type="text/javascript" src="../lib/ext/ext-all.js"></script>
    <script type="text/javascript" src="../js/dict_store.js"></script>
</head>
<script type="text/javascript">
Ext.Loader.setConfig({enabled: true});

Ext.Loader.setPath('Ext.ux', '/ext4/ux/');
Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.toolbar.Paging',
    'Ext.ModelManager',
    'Ext.tip.QuickTipManager'
]);

Ext.onReady(function () {
	/*向上遍历父结点*/
	var nodep=function(node){    		
		var bnode=true;
		var count=0;
		Ext.Array.each(node.childNodes,function(v){
				if(!v.data.checked){						
					bnode=false;
					count++;
					//return;			
				}		
		});
		if(!bnode && count==node.childNodes.length){
			//说明子节点全部没有选中
			return false;
		}
		return true;
	};

	var parentnode=function(node){
		if(node.parentNode != null){
			if(nodep(node.parentNode)){
				node.parentNode.set('checked', true);
			}else{
				node.parentNode.set('checked', false);
			}
			parentnode(node.parentNode);	
		} 
	};


	/*遍历子结点 选中 与取消选中操作*/
	var chd=function(node,check){
		node.set('checked',check);
		if(node.isNode){
			 node.eachChild(function (child) {  
	       			 chd(child,check);
			  });
		}
	};

    Ext.define( 'UserList', {
        extend: 'Ext.data.Model',
        fields: [
            '_id','username','real_name'
        ],
        idProperty: '_id'
    });

    // create the Data Store
    var userStore = Ext.create('Ext.data.Store', {
        pageSize: 200,
        model: 'UserList',
        remoteSort: true,
        proxy: {
            type: 'ajax',
            url: '/user/list',
            reader: {
                type: 'json',
                root: 'data',
                totalProperty: 'count'
            },
            simpleSortMode: true
        },
        sorters: [
            {
                property: '_id',
                direction: 'DESC'
            }
        ]
    });

    //获取文章类别字典数据
    //var dict = getDict('');
    var user_id = null;
    var fs_user = new Ext.form.FieldSet({
    	title: "请选择需要赋权的用户",  
        layout: {type: 'table',columns:1},
        items: [
        	{
                xtype:'combobox',
                id: 'cbx_user',
                pageSize:40,
                triggerAction:'all',
                queryMode:'remote',
                minChars:0,
                labelAlign: 'right',
                store:userStore,
                fieldLabel:'请选择用户',
                id:'user_id_search',
                displayField: 'username',
                valueField: '_id',
                maxLength:35,
                allowBlank:true,
                labelWidth:85,
                width: 250,
                listeners:{
                    'select': function(combox, records, eOpts ){
                        user_id = combox.getValue();
                        params = {};
                        params.username = combox.getRawValue();
                        //var proxy = all_tree_store.getProxy();
                    	//proxy.extraParams = params;
                    	all_tree_store.reload({params:params});
                    }
                }
            }
        ]
    }); 

	var all_tree_store = new Ext.data.TreeStore({
		proxy: {  
	        type: 'ajax',  
	        method: 'GET',
	        url: '/dict/tree_ext?parent_code=article_category&checkbox=true'  
	    },  
	    root: {  
	        id: "article_category",  
	        text: "系统所有栏目权限",  
	        leaf: false,  
	        expandable: true,  
	        expanded: true ,
	        checked: false
	    }
	});

	var all_tree_panel = new Ext.tree.TreePanel({
		autoHeight:true,
		autoScroll:true,
		animate:true,
		columnWidth:1,
		height:380,
		store: all_tree_store,
		buttonAlign:'center',
        buttons: [  
            {  
                text: "确认赋权",  
                minWidth: 70,  
                handler: function(){
                	if (user_id==null || user_id.length == 0) {
                		Ext.MessageBox.show({
		                   title: '信息提示',
		                   msg: '请选择需要赋权的用户！',
		                   buttons: Ext.Msg.OK,
		                   icon: Ext.MessageBox.INFO
		               });
		        	   return;
                	}
                	var records = all_tree_panel.getView().getChecked(),
			        //为存储ID而创建数组
			        ids   = [];
			        Ext.Array.each(records, function(rec){
			           //将选中的节点的ID保存
			           ids.push(rec.get('id'));
			        }); 
			        Ext.MessageBox.confirm('信息提示','确认赋权吗？',function(val){
			       		if(val == 'yes'){
			       	    	Ext.Ajax.request({
			       	            url: '/user/auth_category?categorys='+ids.join(',')+"&user_id="+user_id,
			       	            method : 'POST',
			       	            success: function(response, opts) {
			       	                var data = eval("("+response.responseText+")");
			       	                if(data.flag == 'success')
			       	                	Ext.Msg.alert('信息提示',"赋权成功！");
			       	            },
			       	            failure: function(response, opts) {
			       	            	var data = eval("("+response.responseText+")");
			       	                Ext.Msg.alert('信息提示',data.error);
			       	            }
			       	        });
			       		}
			       	});
                } 
            }
        ]
	});
    all_tree_panel.on('checkchange', function (node, checked) {
		if(checked){
			 node.eachChild(function (child) {  
	   			  chd(child,true);
			 });
		}else{
			 node.eachChild(function (child) {  
	   			 chd(child,false);
			 });
		}    			
		parentnode(node);  //进行父级选中操作    		
	},all_tree_panel);

    var fs_tree = new Ext.form.FieldSet({
    	title: "请勾选栏目树节点为相应用户【赋予】或【解除】权限",  
        layout: "column", 
        //height: 380,
        items: [
        	all_tree_panel       	
        ]
    }); 

    var panel =  Ext.create('Ext.panel.Panel', {
    	title: '用户栏目权限管理设置',
    	width: 500,
    	height: 500,
        region: 'center',
        layout:"form",
        labelAlign: "right",
        buttonAlign: "center",
        bodyStyle:"padding:10px 10px 10px 12px",
        items: [
            fs_user,fs_tree
        ]
    });

    var viewport = new Ext.Viewport({
        layout: 'fit',
        renderTo: "topic-grid",
        items: [panel]
    });

    //dict_store.load({params:{parent_code : "article_category"}});
});
</script>
<body>
<div id="topic-grid" style="height: 1024px;width:100%"></div>
<p>The js is not minified so it is readable. See <a href="panel.js">panel.js</a>.</p>
</body>
</html>